<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ul>
        <li class="item">li_0</li>
        <li class="item">li_1</li>
        <li class="item">li_2</li>
        <li class="item">li_3</li>
        <li class="item">li_4</li>
        <li class="item">li_5</li>
        <li class="item">li_6</li>
        <li class="item">li_7</li>
    </ul>

    <script>
        var colorBefore;
        // 偶数行设置为 orange 
        // 奇数行 设置为 pink

        // 获取所有 li  元素
        var lis = document.getElementsByClassName('item');
        // lis[0].style.backgroundColor = 'orange';
        // lis[1].style.backgroundColor = 'red';
        for (var i = 0; i < lis.length; i++) {
            if(i%2===0){
                lis[i].style.backgroundColor = 'orange';
            }else{
                lis[i].style.backgroundColor = 'pink';
            }

            // 循环绑定 onmouseenter  事件
            lis[i].onmouseenter = function(){
                colorBefore = this.style.backgroundColor;
                // 先保存之前的颜色
                this.style.backgroundColor = 'red';
                
            }
            // 离开时还原
            lis[i].onmouseleave= function(){

                // this.style.backgroundColor = '原来的颜色'
                // 原来的颜色 是什么? 
                // 鼠标进入时,可以先把当时的颜色 保存下来
                this.style.backgroundColor = colorBefore;
            }
            
        }


        // 鼠标进入的 li  变为 红色 ,离开时 还原为 原来的颜色
        // 每个li 都要帮上一个  onmouseenter 事件

        // 循环绑定



    </script>
</body>

</html>